<template>
    <div class="meeting-room-management">
        <h2>审批日志</h2>
        <!--查询条件-->
        <el-form :inline="true" :model="ApprovalNlogNum" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="ApprovalNlogNum.approvalResults" placeholder="审批类型" clearable />
            </el-form-item>
            <el-form-item label="">
                <el-date-picker v-model="ApprovalNlogNum.submissionTime" type="date" placeholder="开始时间" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--数据展示-->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="approvalNumber" label="审批编号" />
            <el-table-column prop="approvalTime" label="审批时间" />
            <el-table-column prop="approver" label="审批人员" />
            <el-table-column prop="approvalType" label="审批类型" />
            <el-table-column prop="businessNumber" label="业务编号" />
            <el-table-column prop="submissionTime" label="提交时间" />
            <el-table-column prop="approvalResult" label="审批结果" />
        </el-table>
        <!--底部操作-->
        <div class="footer-bar">
            <div class="batch-actions">
                <label for="select-all-footer">选择全部</label>
                <button class="secondary-button">全部删除</button>
                <button class="secondary-button">反向选择</button>
                <button class="secondary-button">更多操作</button>
                <!--分页-->
                <Pagination :pageIndex="ApprovalNlogNum.pageIndex" :pageSize="ApprovalNlogNum.pageSize"
                    :count="pageNum.count" :pcount="pageNum.pcount" v-on:pagination="pageWay" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { GetApprovalNlog } from '../../api/Nlog'; // 导入API接口
import Pagination from '@/components/icons/Pagination.vue';
// 页面加载时执行
onMounted(async () => {
    ApprovalNlogWay()
})
// 表格数据
const tableData = ref([{}])
//登录日志信息分页数据
const ApprovalNlogNum = reactive({
    "approvalResults": 0,
    "pageIndex": 1,
    "pageSize": 10,
    "submissionTime": ""
})
// 分页数据
const pageNum = ref({
    count: 0,
    pcount: 0
})
//向父组件传递分页数据
const pageWay = (pageIndex: number, pageSize: number) => {
    ApprovalNlogNum.pageIndex = pageIndex;
    ApprovalNlogNum.pageSize = pageSize;
    ApprovalNlogWay()
}
// 获取登录日志信息
const ApprovalNlogWay = async () => {
    const res = await GetApprovalNlog(ApprovalNlogNum)
    console.log(res.data)
    tableData.value = res.data.data.data
    pageNum.value.count = res.data.data.count
    pageNum.value.pcount = res.data.data.pcount

}

const onSubmit = () => {
    // ApprovalNlogNum.submissionTime = ApprovalNlogNum.submissionTime.toString()
    // 提交查询条件
    ApprovalNlogWay();
}

</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.meeting-room-management {
    padding: 20px;
    font-family: 'Microsoft YaHei', sans-serif;
    color: #333;
    background-color: #f5f7fa;
    /* 模仿背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 20px;
}

h2 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
}

button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.primary-button {
    background-color: #409eff;
    color: white;
}

.primary-button:hover {
    background-color: #66b1ff;
}

.secondary-button {
    background-color: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
}

.secondary-button:hover {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #c6e2ff;
}

.danger-button {
    background-color: #f56c6c;
    color: white;
}

.danger-button:hover {
    background-color: #f78989;
}

.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
}

.batch-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #606266;
}

.batch-actions input[type="checkbox"] {
    margin-right: 5px;
}
</style>
